import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Menu, Dropdown, Modal } from 'antd';

import IconFont from '../../components/icon/icon'
import { clearAllLocalStorage } from '../../utils/utils'
class MyDropdown extends Component {
    state = {
        modalVisible: false,
    };
    setModalVisible(modalVisible) { //控制对话框显示隐藏
        this.setState({ modalVisible });
    }
    handleDropList = (e) => {
        if (e.key === 'logout') {
            this.setModalVisible(true)
        } else if (e.key === 'profile') {
            this.props.history.push('/disk/profile')
        }
    }
    handleOk = () => {
        this.setModalVisible(false)
        clearAllLocalStorage()
        this.props.history.push('/login')
    }
    menu = (
        <Menu onClick={this.handleDropList}>
            <Menu.Item key="profile">
                <IconFont type="iconProfile" className="list_icon" />个人资料
            </Menu.Item>
            <Menu.Item key="help">
                <IconFont type="iconHelp" className="list_icon" />帮助中心
            </Menu.Item>
            <Menu.Item key="logout">
                <IconFont type="iconExit" className="list_icon" />退出
            </Menu.Item>
        </Menu>
    );
    render() {
        return (
            <div>
                <Dropdown overlay={this.menu}>
                    <a className="ant-dropdown-link" href='/#' onClick={e => e.preventDefault()}>
                        {this.props.nickname} <IconFont type="iconDropdown" />
                    </a>
                </Dropdown>
                <Modal
                    title="菩提网盘提示"
                    centered
                    cancelText="取消"
                    okText="确定"
                    visible={this.state.modalVisible}
                    onOk={this.handleOk}
                    onCancel={() => this.setModalVisible(false)}>
                    <p style={{ textAlign: "center", fontSize: "18px" }}>确定要退出菩提网盘吗？</p>
                </Modal>
            </div>

        )
    }

}
export default withRouter(MyDropdown)
